Cấu hình TypeScript: Làm chủ Tùy chọn Trình biên dịch TSConfig

Tệp tsconfig.json là cốt lõi của bất kỳ dự án TypeScript nào. Nó quyết định cách trình biên dịch TypeScript (tsc) chuyển đổi các tệp .ts của bạn thành JavaScript. Một tsconfig.json được cấu hình tốt rất quan trọng để duy trì chất lượng mã, đảm bảo khả năng tương thích trên các môi trường khác nhau và tối ưu hóa quy trình xây dựng. Hướng dẫn toàn diện này đi sâu vào các tùy chọn tsconfig.json nâng cao, trao quyền cho bạn tinh chỉnh các dự án TypeScript của mình để đạt hiệu suất và khả năng bảo trì cao nhất.

Tìm hiểu những điều cơ bản: Tại sao TSConfig lại quan trọng

Trước khi đi sâu vào các tùy chọn nâng cao, hãy tóm tắt lý do tại sao tsconfig.json lại quan trọng:

• Kiểm soát biên dịch: Nó chỉ định những tệp nào nên được đưa vào dự án của bạn và cách chúng nên được biên dịch.
• Kiểm tra kiểu: Nó xác định các quy tắc và sự nghiêm ngặt của việc kiểm tra kiểu, giúp bạn phát hiện lỗi sớm trong chu kỳ phát triển.
• Kiểm soát đầu ra: Nó xác định phiên bản JavaScript đích, hệ thống mô-đun và thư mục đầu ra.
• Tích hợp IDE: Nó cung cấp thông tin giá trị cho các IDE (như VS Code, WebStorm, v.v.) cho các tính năng như hoàn thành mã, đánh dấu lỗi và tái cấu trúc.

Nếu không có tệp tsconfig.json, trình biên dịch TypeScript sẽ sử dụng các cài đặt mặc định, có thể không phù hợp với tất cả các dự án. Điều này có thể dẫn đến hành vi không mong muốn, các vấn đề về khả năng tương thích và trải nghiệm phát triển không lý tưởng.

Tạo TSConfig của bạn: Bắt đầu nhanh

Để tạo tệp tsconfig.json, chỉ cần chạy lệnh sau trong thư mục gốc của dự án của bạn:

            tsc --init
            

              
                Copy
              
            
          

Thao tác này sẽ tạo một tệp tsconfig.json cơ bản với một số tùy chọn phổ biến. Sau đó, bạn có thể tùy chỉnh tệp này để đáp ứng các yêu cầu cụ thể của dự án.

Các tùy chọn Trình biên dịch chính: Tổng quan chi tiết

Tệp tsconfig.json chứa một đối tượng compilerOptions, nơi bạn cấu hình trình biên dịch TypeScript. Hãy khám phá một số tùy chọn quan trọng và thường được sử dụng nhất:

target

Tùy chọn này chỉ định phiên bản đích ECMAScript cho mã JavaScript được biên dịch. Nó xác định các tính năng JavaScript nào mà trình biên dịch sẽ sử dụng, đảm bảo khả năng tương thích với môi trường đích (ví dụ: trình duyệt, Node.js). Các giá trị phổ biến bao gồm ES5, ES6 (ES2015), ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext. Việc sử dụng ESNext sẽ nhắm mục tiêu các tính năng ECMAScript được hỗ trợ mới nhất.

Ví dụ:

            "compilerOptions": {
  "target": "ES2020"
}
            

              
                Copy
              
            
          

Cấu hình này sẽ hướng dẫn trình biên dịch tạo mã JavaScript tương thích với ECMAScript 2020.

module

Tùy chọn này chỉ định hệ thống mô-đun sẽ được sử dụng trong mã JavaScript được biên dịch. Các giá trị phổ biến bao gồm CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020 và ESNext. Việc lựa chọn hệ thống mô-đun phụ thuộc vào môi trường đích và trình tải mô-đun đang được sử dụng (ví dụ: Node.js, Webpack, Browserify).

Ví dụ:

            "compilerOptions": {
  "module": "CommonJS"
}
            

              
                Copy
              
            
          

Cấu hình này phù hợp với các dự án Node.js, thường sử dụng hệ thống mô-đun CommonJS.

lib

Tùy chọn này chỉ định tập hợp các tệp thư viện sẽ được đưa vào quá trình biên dịch. Các tệp thư viện này cung cấp các định nghĩa kiểu cho các API JavaScript tích hợp và API trình duyệt. Các giá trị phổ biến bao gồm ES5, ES6, ES7, DOM, WebWorker, ScriptHost và hơn thế nữa.

Ví dụ:

            "compilerOptions": {
  "lib": ["ES2020", "DOM"]
}
            

              
                Copy
              
            
          

Cấu hình này bao gồm các định nghĩa kiểu cho ECMAScript 2020 và API DOM, rất cần thiết cho các dự án dựa trên trình duyệt.

allowJs

Tùy chọn này cho phép trình biên dịch TypeScript biên dịch các tệp JavaScript cùng với các tệp TypeScript. Điều này có thể hữu ích khi di chuyển một dự án JavaScript sang TypeScript hoặc khi làm việc với các cơ sở mã JavaScript hiện có.

Ví dụ:

            "compilerOptions": {
  "allowJs": true
}
            

              
                Copy
              
            
          

Với tùy chọn này được bật, trình biên dịch sẽ xử lý cả tệp .ts và .js.

checkJs

Tùy chọn này bật kiểm tra kiểu cho các tệp JavaScript. Khi kết hợp với allowJs, nó cho phép TypeScript xác định các lỗi kiểu tiềm ẩn trong mã JavaScript của bạn.

Ví dụ:

            "compilerOptions": {
  "allowJs": true,
  "checkJs": true
}
            

              
                Copy
              
            
          

Cấu hình này cung cấp kiểm tra kiểu cho cả tệp TypeScript và JavaScript.

jsx

Tùy chọn này chỉ định cách cú pháp JSX (được sử dụng trong React và các framework khác) nên được chuyển đổi. Các giá trị phổ biến bao gồm preserve, react, react-native và react-jsx. preserve giữ nguyên cú pháp JSX, react chuyển đổi nó thành các lệnh gọi React.createElement, react-native dành cho việc phát triển React Native và react-jsx chuyển đổi nó thành các hàm nhà máy JSX. react-jsxdev dành cho mục đích phát triển.

Ví dụ:

            "compilerOptions": {
  "jsx": "react"
}
            

              
                Copy
              
            
          

Cấu hình này phù hợp với các dự án React, chuyển đổi JSX thành các lệnh gọi React.createElement.

declaration

Tùy chọn này tạo các tệp khai báo (.d.ts) cho mã TypeScript của bạn. Các tệp khai báo cung cấp thông tin kiểu cho mã của bạn, cho phép các dự án TypeScript khác hoặc các dự án JavaScript sử dụng mã của bạn với kiểm tra kiểu thích hợp.

Ví dụ:

            "compilerOptions": {
  "declaration": true
}
            

              
                Copy
              
            
          

Cấu hình này sẽ tạo các tệp .d.ts cùng với các tệp JavaScript được biên dịch.

declarationMap

Tùy chọn này tạo các tệp bản đồ nguồn (.d.ts.map) cho các tệp khai báo được tạo. Bản đồ nguồn cho phép trình gỡ lỗi và các công cụ khác ánh xạ lại mã nguồn TypeScript gốc khi làm việc với các tệp khai báo.

Ví dụ:

            "compilerOptions": {
  "declaration": true,
  "declarationMap": true
}
            

              
                Copy
              
            
          

sourceMap

Tùy chọn này tạo các tệp bản đồ nguồn (.js.map) cho mã JavaScript được biên dịch. Bản đồ nguồn cho phép trình gỡ lỗi và các công cụ khác ánh xạ lại mã nguồn TypeScript gốc khi gỡ lỗi trong trình duyệt hoặc các môi trường khác.

Ví dụ:

            "compilerOptions": {
  "sourceMap": true
}
            

              
                Copy
              
            
          

outFile

Tùy chọn này nối và phát ra tất cả các tệp đầu ra thành một tệp duy nhất. Điều này thường được sử dụng để đóng gói mã cho các ứng dụng dựa trên trình duyệt.

Ví dụ:

            "compilerOptions": {
  "outFile": "dist/bundle.js"
}
            

              
                Copy
              
            
          

outDir

Tùy chọn này chỉ định thư mục đầu ra cho các tệp JavaScript được biên dịch. Nếu không được chỉ định, trình biên dịch sẽ đặt các tệp đầu ra trong cùng một thư mục với các tệp nguồn.

Ví dụ:

            "compilerOptions": {
  "outDir": "dist"
}
            

              
                Copy
              
            
          

Cấu hình này sẽ đặt các tệp JavaScript được biên dịch trong thư mục dist.

rootDir

Tùy chọn này chỉ định thư mục gốc của dự án TypeScript. Trình biên dịch sử dụng thư mục này để giải quyết tên mô-đun và tạo đường dẫn tệp đầu ra. Điều này đặc biệt hữu ích cho các cấu trúc dự án phức tạp.

Ví dụ:

            "compilerOptions": {
  "rootDir": "src"
}
            

              
                Copy
              
            
          

removeComments

Tùy chọn này xóa các nhận xét khỏi mã JavaScript được biên dịch. Điều này có thể giúp giảm kích thước của các tệp đầu ra.

Ví dụ:

            "compilerOptions": {
  "removeComments": true
}
            

              
                Copy
              
            
          

noEmitOnError

Tùy chọn này ngăn trình biên dịch phát ra các tệp JavaScript nếu phát hiện bất kỳ lỗi kiểu nào. Điều này đảm bảo rằng chỉ mã hợp lệ mới được tạo.

Ví dụ:

            "compilerOptions": {
  "noEmitOnError": true
}
            

              
                Copy
              
            
          

strict

Tùy chọn này bật tất cả các tùy chọn kiểm tra kiểu nghiêm ngặt. Điều này rất được khuyến khích cho các dự án mới vì nó giúp phát hiện các lỗi tiềm ẩn và thực thi các phương pháp hay nhất.

Ví dụ:

            "compilerOptions": {
  "strict": true
}
            

              
                Copy
              
            
          

Việc bật chế độ nghiêm ngặt tương đương với việc bật các tùy chọn sau:

• noImplicitAny
• noImplicitThis
• alwaysStrict
• strictNullChecks
• strictFunctionTypes
• strictBindCallApply
• noImplicitReturns
• noFallthroughCasesInSwitch

esModuleInterop

Tùy chọn này cho phép khả năng tương tác giữa các mô-đun CommonJS và ES. Nó cho phép bạn nhập các mô-đun CommonJS trong các mô-đun ES và ngược lại.

Ví dụ:

            "compilerOptions": {
  "esModuleInterop": true
}
            

              
                Copy
              
            
          

forceConsistentCasingInFileNames

Tùy chọn này thực thi việc sử dụng chữ hoa/chữ thường nhất quán trong tên tệp. Điều này rất quan trọng đối với khả năng tương thích đa nền tảng, vì một số hệ điều hành phân biệt chữ hoa/chữ thường trong khi các hệ điều hành khác thì không.

Ví dụ:

            "compilerOptions": {
  "forceConsistentCasingInFileNames": true
}
            

              
                Copy
              
            
          

baseUrl và paths

Các tùy chọn này cho phép bạn cấu hình độ phân giải mô-đun. baseUrl chỉ định thư mục cơ sở để giải quyết tên mô-đun không tương đối và paths cho phép bạn xác định các bí danh mô-đun tùy chỉnh.

Ví dụ:

            "compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@components/*": ["src/components/*"],
    "@utils/*": ["src/utils/*"]
  }
}
            

              
                Copy
              
            
          

Cấu hình này cho phép bạn nhập các mô-đun bằng cách sử dụng các bí danh như @components/MyComponent và @utils/myFunction.

Cấu hình nâng cao: Vượt xa những điều cơ bản

Bây giờ, hãy khám phá một số tùy chọn tsconfig.json nâng cao có thể nâng cao hơn nữa trải nghiệm phát triển TypeScript của bạn.

Biên dịch gia tăng

TypeScript hỗ trợ biên dịch gia tăng, có thể tăng tốc đáng kể quá trình xây dựng cho các dự án lớn. Để bật biên dịch gia tăng, hãy đặt tùy chọn incremental thành true và chỉ định một tùy chọn tsBuildInfoFile.

Ví dụ:

            "compilerOptions": {
  "incremental": true,
  "tsBuildInfoFile": ".tsbuildinfo"
}
            

              
                Copy
              
            
          

Tùy chọn tsBuildInfoFile chỉ định tệp nơi trình biên dịch sẽ lưu trữ thông tin xây dựng. Thông tin này được sử dụng để xác định các tệp nào cần được biên dịch lại trong quá trình xây dựng tiếp theo.

Tham chiếu dự án

Tham chiếu dự án cho phép bạn cấu trúc mã của mình thành các dự án nhỏ hơn, dễ quản lý hơn. Điều này có thể cải thiện thời gian xây dựng và tổ chức mã cho các cơ sở mã lớn. Một sự tương tự hay cho khái niệm này là kiến trúc Microservice - mỗi dịch vụ đều độc lập, nhưng dựa vào các dịch vụ khác trong hệ sinh thái.

Để sử dụng tham chiếu dự án, bạn cần tạo một tệp tsconfig.json riêng cho mỗi dự án. Sau đó, trong tệp tsconfig.json chính, bạn có thể chỉ định các dự án sẽ được tham chiếu bằng cách sử dụng tùy chọn references.

Ví dụ:

            {
  "compilerOptions": {
    ...
  },
  "references": [
    { "path": "./project1" },
    { "path": "./project2" }
  ]
}
            

              
                Copy
              
            
          

Cấu hình này chỉ định rằng dự án hiện tại phụ thuộc vào các dự án nằm trong thư mục ./project1 và ./project2.

Bộ chuyển đổi tùy chỉnh

Bộ chuyển đổi tùy chỉnh cho phép bạn sửa đổi đầu ra của trình biên dịch TypeScript. Điều này có thể được sử dụng cho nhiều mục đích khác nhau, chẳng hạn như thêm các chuyển đổi mã tùy chỉnh, xóa mã không sử dụng hoặc tối ưu hóa đầu ra cho các môi trường cụ thể. Chúng thường được sử dụng cho các tác vụ quốc tế hóa và bản địa hóa i18n.

Để sử dụng bộ chuyển đổi tùy chỉnh, bạn cần tạo một tệp JavaScript riêng biệt xuất một hàm sẽ được trình biên dịch gọi. Sau đó, bạn có thể chỉ định tệp bộ chuyển đổi bằng cách sử dụng tùy chọn plugins trong tệp tsconfig.json.

Ví dụ:

            {
  "compilerOptions": {
    ...
    "plugins": [
      { "transform": "./transformer.js" }
    ]
  }
}
            

              
                Copy
              
            
          

Cấu hình này chỉ định rằng tệp ./transformer.js nên được sử dụng làm bộ chuyển đổi tùy chỉnh.

Tệp, Bao gồm và Loại trừ

Ngoài compilerOptions, các tùy chọn cấp gốc khác trong tsconfig.json kiểm soát các tệp nào được đưa vào quá trình biên dịch:

• files: Một mảng các đường dẫn tệp để đưa vào quá trình biên dịch.
• include: Một mảng các mẫu glob chỉ định các tệp cần đưa vào.
• exclude: Một mảng các mẫu glob chỉ định các tệp cần loại trừ.

Các tùy chọn này cung cấp khả năng kiểm soát chi tiết đối với các tệp nào được trình biên dịch TypeScript xử lý. Ví dụ: bạn có thể loại trừ các tệp kiểm tra hoặc mã được tạo khỏi quá trình biên dịch.

Ví dụ:

            {
  "compilerOptions": { ... },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.spec.ts"]
}
            

              
                Copy
              
            
          

Cấu hình này bao gồm tất cả các tệp trong thư mục src và các thư mục con của nó, đồng thời loại trừ các tệp trong các thư mục node_modules và dist, cũng như mọi tệp có phần mở rộng .spec.ts (thường được sử dụng cho các bài kiểm tra đơn vị).

Các tùy chọn Trình biên dịch cho các tình huống cụ thể

Các dự án khác nhau có thể yêu cầu các cài đặt trình biên dịch khác nhau để đạt được kết quả tối ưu. Hãy xem xét một vài tình huống cụ thể và các cài đặt trình biên dịch được khuyến nghị cho mỗi tình huống.

Phát triển ứng dụng web

Để phát triển ứng dụng web, bạn thường sẽ muốn sử dụng các cài đặt trình biên dịch sau:

            {
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
            

              
                Copy
              
            
          

Các cài đặt này phù hợp với các ứng dụng web hiện đại sử dụng React hoặc các framework tương tự khác. Chúng nhắm mục tiêu các tính năng ECMAScript mới nhất, sử dụng các mô-đun ES và bật kiểm tra kiểu nghiêm ngặt.

Phát triển backend Node.js

Để phát triển backend Node.js, bạn thường sẽ muốn sử dụng các cài đặt trình biên dịch sau:

            {
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "esModuleInterop": true,
    "strict": true,
    "sourceMap": true,
    "outDir": "dist",
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
            

              
                Copy
              
            
          

Các cài đặt này phù hợp với các ứng dụng Node.js sử dụng hệ thống mô-đun CommonJS. Chúng nhắm mục tiêu các tính năng ECMAScript mới nhất, bật kiểm tra kiểu nghiêm ngặt và cho phép bạn nhập các tệp JSON dưới dạng mô-đun.

Phát triển thư viện

Để phát triển thư viện, bạn thường sẽ muốn sử dụng các cài đặt trình biên dịch sau:

            {
  "compilerOptions": {
    "target": "ES5",
    "module": "UMD",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}
            

              
                Copy
              
            
          

Các cài đặt này phù hợp để tạo các thư viện có thể được sử dụng trong cả môi trường trình duyệt và Node.js. Chúng tạo các tệp khai báo và bản đồ nguồn để cải thiện trải nghiệm nhà phát triển.

Các phương pháp hay nhất để Quản lý TSConfig

Dưới đây là một số phương pháp hay nhất cần ghi nhớ khi quản lý các tệp tsconfig.json của bạn:

• Bắt đầu với cấu hình cơ sở: Tạo tệp tsconfig.json cơ sở với các cài đặt chung và sau đó mở rộng nó trong các dự án khác bằng cách sử dụng tùy chọn extends.
• Sử dụng chế độ nghiêm ngặt: Bật chế độ nghiêm ngặt để bắt các lỗi tiềm ẩn và thực thi các phương pháp hay nhất.
• Cấu hình độ phân giải mô-đun: Cấu hình chính xác độ phân giải mô-đun để tránh lỗi nhập.
• Sử dụng tham chiếu dự án: Cấu trúc mã của bạn thành các dự án nhỏ hơn, dễ quản lý hơn bằng cách sử dụng tham chiếu dự án.
• Giữ cho tệp tsconfig.json của bạn luôn được cập nhật: Xem xét tệp tsconfig.json của bạn thường xuyên và cập nhật nó khi dự án của bạn phát triển.
• Kiểm soát phiên bản tệp tsconfig.json của bạn: Ghi tệp tsconfig.json của bạn vào kiểm soát phiên bản cùng với mã nguồn khác của bạn.
• Tài liệu về cấu hình của bạn: Thêm nhận xét vào tệp tsconfig.json của bạn để giải thích mục đích của từng tùy chọn.

Kết luận: Làm chủ Cấu hình TypeScript

Tệp tsconfig.json là một công cụ mạnh mẽ để cấu hình trình biên dịch TypeScript và kiểm soát quy trình xây dựng. Bằng cách hiểu các tùy chọn khả dụng và tuân theo các phương pháp hay nhất, bạn có thể tinh chỉnh các dự án TypeScript của mình để đạt hiệu suất, khả năng bảo trì và khả năng tương thích tối ưu. Hướng dẫn này đã cung cấp tổng quan toàn diện về các tùy chọn nâng cao có sẵn trong tệp tsconfig.json, trao quyền cho bạn kiểm soát hoàn toàn quy trình làm việc phát triển TypeScript của mình. Hãy nhớ luôn tham khảo tài liệu TypeScript chính thức để biết thông tin và hướng dẫn cập nhật nhất. Khi các dự án của bạn phát triển, thì việc bạn hiểu và sử dụng các công cụ cấu hình mạnh mẽ này cũng vậy. Chúc bạn viết mã vui vẻ!